<template>
    <div>
        <el-dialog center :title="info.win ? '添加秒杀' : '修改秒杀'" :before-close="close" :visible.sync="info.isShow">
            <el-form :model="seckillInfo" :rules="rules" ref="seckillForm">
                <el-form-item prop="title" label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="seckillInfo.title" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <el-date-picker class="timer" v-model="value" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select @change="changeFirst(false)" v-model="seckillInfo.first_cateid" placeholder="请选择分类">
                        <el-option v-for="item in FirstList" :value="item.id" :key="item.id" :label="item.catename">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select @change="changeGoods(false)" v-model="seckillInfo.second_cateid" placeholder="请选择分类">
                        <el-option v-for="item in secondArr" :value="item.id" :key="item.id" :label="item.catename">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="seckillInfo.goodsid" placeholder="请选择商品">
                        <el-option v-for="item in goodsArr" :value="item.id" :key="item.id" :label="item.goodsname">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="seckillInfo.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 辅助性函数
import { mapActions, mapGetters } from 'vuex'
// 引入商品列表,以及秒杀接口
import { goodsList, seckAdd, seckInfo, seckEdit } from '../../request/api'
export default {
    props: ['info'],
    data() {
        return {
            formLabelWidth: '120px',
            seckillInfo: {
                title: '', // 限时秒杀名称
                begintime: '', // 开始时间
                endtime: '', // 结束时间
                first_cateid: '', // 商品一级分类编号
                second_cateid: '', // 商品二级分类编号
                goodsid: '', // 商品编号
                status: '' // 状态   1正常2禁用
            },
            value: null,
            rules: {
                title: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
            },
            secondArr: [],  // 二级分类
            goodsArr: [] //商品
        };
    },
    computed: {
        //商品一级列表
        ...mapGetters({
            FirstList: 'cate/getCateList'
        })
    },
    mounted() {
        // 页面加载调用一级分类
        this.cateFirst_cateid()
    },
    methods: {
        ...mapActions({
            // 一级分类
            cateFirst_cateid: 'cate/changeCateAction',
            // 秒杀列表
            SeckillListAction: 'seckill/SeckillListAction'
        }),
        // 一级切换二级分类事件
        changeFirst(flag) {
            let index = this.FirstList.findIndex(item => item.id == this.seckillInfo.first_cateid)
            console.log(index, 'index');
            this.secondArr = this.FirstList[index].children
            console.log(this.secondArr, '二级分类');
            if (!flag) {
                //清空二级分类的双向数据绑定的值
                this.seckillInfo.second_cateid = ''
                 this.seckillInfo.goodsid = ''
            }
        },
        // 获取商品
        // 根据以及分类和二级分类的 编号 id,调用商品管理列表接口，传入参数获取商品
        changeGoods(flag) {
            let fid = this.seckillInfo.first_cateid
            let sid = this.seckillInfo.second_cateid
            console.log(fid, sid);
            goodsList({ fid, sid })
                .then(res => {
                    console.log(res, '商品信息');
                    this.goodsArr = res.list
                    console.log(this.goodsArr, 'adadadadadada');
                })
            if (!flag) {
                //清空二级分类的双向数据绑定的值
                this.seckillInfo.goodsid = ''
            }
        },
        // 取消按钮事件
        close() {
            this.$emit('close', false)
            // 调用清空
            this.reset()
        },
        // 清空
        reset() {
            this.seckillInfo = {
                title: '', // 限时秒杀名称
                begintime: '', // 开始时间
                endtime: '', // 结束时间
                first_cateid: '', // 商品一级分类编号
                second_cateid: '', // 商品二级分类编号
                goodsid: '', // 商品编号
                status: '' // 状态   1正常2禁用
            },
                // 清空验证
                this.$refs.seckillForm.resetFields()
            // 清空时间
            this.value = []
        },
        // 回显
        lookup(id) {
            // 调用查询接口
            seckInfo({ id })
                .then(res => {
                    console.log(res, '一条数据');
                    this.seckillInfo = res.list
                    this.seckillInfo.id = id
                    this.value = [
                        new Date(parseInt(this.seckillInfo.begintime)),
                        new Date(parseInt(this.seckillInfo.endtime))
                    ]
                    this.changeFirst(true)
                    this.changeGoods(true)
                })
        },
        // 确认事件
        confirm() {
            this.$refs.seckillForm.validate(flag => {
                if (flag) {
                    // 验证成功
                    this.seckillInfo.begintime = new Date(this.value[0]).getTime()
                    this.seckillInfo.endtime = new Date(this.value[1]).getTime()
                    if (this.info.win) {
                        console.log(this.seckillInfo, '表单');
                        // 调用添加接口
                        seckAdd(this.seckillInfo)
                            .then(res => {
                                console.log(res, '秒杀添加');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 重新加载列表
                                    this.SeckillListAction()
                                    // 置空
                                    this.close()
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {
                        // 调用编辑接口
                        seckEdit(this.seckillInfo)
                            .then(res => {
                                console.log(res, '秒杀添加');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 重新加载列表
                                    this.SeckillListAction()
                                    // 置空
                                    this.close()
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }
                } else {
                    // 验证失败
                }
            })
        }
    }
};
</script>

<style  lang="less" scoped>
.timer{
    width: 70%;
}
</style>
